<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=0">
    <title>京东车品</title>
    <script>
        (function(doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function() {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 10 * (clientWidth / 750) + 'px';
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
<!--     <link rel="stylesheet" href="css/cropper.css">
    <link rel="stylesheet" href="css/myCrop.css"> -->
    <link rel="stylesheet" href="css/cropper.min.css">
    <link rel="stylesheet" href="css/ImgCropping.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<audio id="audio" style="display: none;" loop="loop">
    <source src="video/bgm.ogg" type="audio/ogg" />
    <source src="video/bgm.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>
<!-- <img id="bgm-play" class="audio-btn" src="images/no-music.png" style="display: none;">
<img id="bgm-pause" class="audio-btn" src="images/music.png"> -->
<div id="loadStatus" class="slide-loading">
    <img class="bg-star" src="images/bg_star.png">
    <div class="earth-box">
        <div class="run ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="1s" swiper-animate-delay="2s"></div>
        <div class="bt-earth ani" swiper-animate-effect="slideInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s">
            <div class="earth-layer abs"></div>
            <div class="earth rel">
                <img src="images/earth_all.png" alt="地球">
            </div>
        </div>
    </div>
    <img src="images/title.png" class="title ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.3s" alt="文字">
    <img src="images/bg_ball.png" class="ball-lt" alt="行星">
    <img src="images/bg_ball2.png" class="ball-rt" alt="行星">
    <div class="earth-run"></div>
    <img class="btn-start" src="images/icon-start.png">
    <span class="loading-text">加载中...</span>
</div>
<div class="swiper-container swiper-no-swiping">
    <div class="swiper-wrapper">
        <section class="swiper-slide">
            <div id="slideVideo" class="slide1">
                <!-- <canvas id="runVideo" height="100%" width="100%"></canvas> -->
<!--                 <video id="runVideo" preload style="display: none;" src="video/slide1.mp4" x5-video-player-type="h5">
                </video> -->
                <video src="http://storage.jd.com/sssh-assets/jdcp0126-10m.mp4" x-webkit-airplay="true" playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" id="runVideo"></video>
                <!-- <canvas id="testCanvas" style="display: none; z-index: 9999;"></canvas> -->
                <div id="videoEnd" class="video-end ani" swiper-animate-effect="slideInUp" swiper-animate-duration=".6s" swiper-animate-delay=".2s" style="display: none;">
                    <img class="new-tit" src="images/title.png">
                    <img src="images/bg_ball.png" class="slide2-ball">
                    <img src="images/bg_ball.png" class="slide2-ball">
                    <img src="images/bg_ball2.png" class="slide2-ball2">
                    <div class="center-part center">
                        <img src="images/jd_title.png" class="jd-title abs ani" swiper-animate-effect="slideInDown" swiper-animate-duration=".3s" swiper-animate-delay=".8s">
<!--                         <img src="images/jd_wish.png" class="jd-wish abs ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1.5s" swiper-animate-delay="1.1s"> -->
                        <img src="images/cloud1.png" class="cloud1 abs">
                        <img src="images/cloud2.png" class="cloud2 abs">
                        <div class="earth-all-p rel">
                            <div class="run"></div>
                            <img src="images/earth_all.png" class="jd-earth cl">
                        </div>
                    </div>
                </div>
                <button type="button" class="btn-go-hc"></button>
            </div>
        </section>

<!--         <section class="swiper-slide slide2">
            <img class="bg-star" src="images/bg_star.png" alt="星空">
            <img src="images/bg_earth2.png" class="slide2-bg-earth" alt="地球">
            <img src="images/bg_ball.png" class="slide2-ball" alt="bg">
            <img src="images/bg_ball2.png" class="slide2-ball2" alt="bg">
            <div class="upload-pic">
                <h4>-与大佬合照-</h4>
                <img src="images/ic_camerra.png" alt="图标">
                <div class="up-btn-row">
                    <button type="button" id="toUploadSlide" class="upload-btn">点击上传美照</button>
                </div>
            </div>
        </section> -->
        <div class="hide" style="display: none;">
            <img src="images/bg_fs1s.png" id="maleBg">
            <img id="theFace" src="" crossOrigin="">
            <canvas id="faceCtx"></canvas>
            <div class="demo-container" id="main">
                <img id="img" crossOrigin="" />
            </div>
            <div class="square previewImg"></div>
            <div class="circular previewImg"></div>
        </div>
        <section id="testImg" class="swiper-slide slide3">
            <!--图片裁剪框 start-->
            <div class="tailoring-container" style="display: none;">
                <img class="crop-top" src="images/crop-top.jpg">
                <div class="tailoring-content">
                        <div class="tailoring-content-two">
                            <div class="tailoring-box-parcel">
<!--                                 <img class="face-bg" src="images/face-bg.png"> -->
                                <img id="tailoringImg" crossOrigin="">
                            </div>
                            <div class="preview-box-parcel" style="display: none;">
                                <p>图片预览：</p>
                                <div class="square previewImg"></div>
                                <div class="circular previewImg"></div>
                            </div>
                        </div>
                </div>
                <div class="crop-bot-box">
                    <div class="crop-bot">
                        <div class="crop-btn-box">
                            <span class="cropper-reset-btn"><img src="images/icon-btn1.png">复位</span>
                            <span class="cropper-rotate-btn"><img src="images/icon-btn2.png">旋转</span>
                            <span class="cropper-scaleX-btn"><img src="images/icon-btn3.png">水平翻转</span>
                        </div>
                        <div class="crop-btn-box">
                            <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)">
                            <img src="images/btn-submit.png" class="sureCut" id="sureCut"></button>
                        </div>
                    </div>
                </div>
            </div>
            <!--图片裁剪框 end-->
        <div class="swiper-box">

                <div class="chat-lt abs ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="1s">
                    <img id="chatLt" class="ani"  swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="1s" src="images/chat/l1.png">
                </div>
                <div class="chat-rt abs ani"  swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="1.2s">
                    <img id="chatRt" class="ani"  swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="1s" src="images/chat/r1.png">
                </div>
                <div class="center-per">
                    <div class="per-cpzj ani" swiper-animate-effect="zoomInLeft" swiper-animate-duration="1.5s" swiper-animate-delay=".1s"></div>
                    <!-- <img class="user-pic" id="userPic" src="#" alt="" style="display: none;"> -->
                    <canvas id="myCanvas" class="per-user" style="display: none;"></canvas>
                    <div id="perUser" class="per-user ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="1s"></div>
                    <div id="perDl" class="per-dl ani" swiper-animate-effect="zoomInRight" swiper-animate-duration="1.5s" swiper-animate-delay=".1s">
                        <img src="images/dl-bot.png">
                    </div>
                    <div class="title-lt ani"  swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="1.5s">
                        <p>京东商城汽车用品部总经理</p>
                        <p id="sanm" class="name">王 敏 先</p>
                    </div>
                    <div class="title-rt ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="1.6s">
                        <p id="dlPosit">马勒(MAHLE)总经理</p>
                        <!--<p id="dlName1" class="name"><span class="ch-name">陈 红 梅</span></p>-->
                        <p id="dlName" class="name"><span class="can-name">陈 红 梅</span><!--<canvas id="textCanvas" width="31" height="393" style="display: none;"></canvas>--></p>
                    </div>
                </div>

                </div>
                <div class="upt-btn-row">
                    <button type="button" id="selectFx" class="save-hide btn-ch-xnfx"><!--选择新年福星--></button>
                    <!--上传美照-->
                    <input type="file" id="uploadUserPic" onchange="selectImg(this)" class="save-hide btn-scmz" accept="image/jpg,image/jpeg,image/png,image/PNG" />
                    <!-- <button type="button" id="uploadUserPic" class="save-hide btn-scmz"></button> -->
                    <button type="button" id="selectComLeader" class="save-hide btn-ch-dl"><!--选择大佬--></button>
                    <button type="button" id="mergePic" class="save-hide btn-merge"><!--合成新年招财照--></button>
                </div>
                <span id="btn-save"></span>
                <div class="qrcode abs">
                    <img src="images/qrcode.png" alt="">
                    <p>识别二维码参与互动</p>
                </div>
                <div class="select-dl ani" id="comLayer" swiper-animate-effect="zoomIn" swiper-animate-duration=".6s" swiper-animate-delay=".1s">
                    <div class="select-dl-inner">
                        <a href="javascript:" class="com-name" data-id="1">皇驰</a>
                        <a href="javascript:" class="com-name dl-md" data-id="2">马勒(MAHLE)</a>
                        <a href="javascript:" class="com-name" data-id="3">飞利浦</a>
                        <a href="javascript:" class="com-name" data-id="4">德国马牌</a>
                        <a href="javascript:" class="com-name" data-id="5">凌度</a>
                        <a href="javascript:" class="com-name" data-id="6">倍思</a>
                        <a href="javascript:" class="com-name" data-id="7">野马</a>
                        <a href="javascript:" class="com-name dl-md" data-id="8">TankedRacing(坦克)</a>
                        <a href="javascript:" class="com-name" data-id="9">骑士qishi</a>
                        <a href="javascript:" class="com-name" data-id="10">骆驼</a>
                        <a href="javascript:" class="com-name" data-id="11">爱车屋</a>
                        <a href="javascript:" class="com-name" data-id="12">牧宝Mubo</a>
                        <a href="javascript:" class="com-name" data-id="13">固特异</a>
                        <a href="javascript:" class="com-name" data-id="14">车丽友</a>
                        <a href="javascript:" class="com-name" data-id="15">GiGi</a>
                        <a href="javascript:" class="com-name" data-id="16">北极绒</a>
                        <a href="javascript:" class="com-name" data-id="17">卡饰社</a>
                        <a href="javascript:" class="com-name" data-id="18">图拉斯</a>
                        <a href="javascript:" class="com-name" data-id="19">五福金牛</a>
                        <a href="javascript:" class="com-name" data-id="20">尼罗河</a>
                        <a href="javascript:" class="com-name" data-id="21">途雅</a>
                        <a href="javascript:" class="com-name" data-id="22">标榜</a>
                        <a href="javascript:" class="com-name dl-md" data-id="23">曼牌(MANNFILTER)</a>
                        <a href="javascript:" class="com-name" data-id="24">采埃孚</a>
                        <a href="javascript:" class="com-name" data-id="25">欧司朗</a>
                        <a href="javascript:" class="com-name" data-id="26">索菲玛</a>
                        <a href="javascript:" class="com-name" data-id="27">大师贴膜</a>
                        <a href="javascript:" class="com-name" data-id="28">E&U</a>
                        <a href="javascript:" class="com-name" data-id="29">龟牌</a>
                        <a href="javascript:" class="com-name" data-id="30">卡耐</a>
                        <a href="javascript:" class="com-name" data-id="31">卡赫</a>
                        <a href="javascript:" class="com-name" data-id="32">龙膜</a>
                        <a href="javascript:" class="com-name" data-id="33">KDX</a>
                        <a href="javascript:" class="com-name" data-id="34">威固</a>
                        <a href="javascript:" class="com-name" data-id="35">美基</a>
                        <a href="javascript:" class="com-name" data-id="36">圣科</a>
                        <a href="javascript:" class="com-name" data-id="37">强生</a>
                        <a href="javascript:" class="com-name" data-id="38">维尔卡特</a>
                        <a href="javascript:" class="com-name" data-id="39">亿力</a>
                        <a href="javascript:" class="com-name" data-id="40">好顺</a>
                        <a href="javascript:" class="com-name" data-id="41">乔氏</a>
                        <a href="javascript:" class="com-name" data-id="42">名奢汇</a>
                        <a href="javascript:" class="com-name dl-lg" data-id="43">艾梦露儿（Aimer Leurre）</a>
                        <a href="javascript:" class="com-name dl-md" data-id="44">领臣（LINGCHEN）</a>
                        <a href="javascript:" class="com-name" data-id="45">ALIS</a>
                        <a href="javascript:" class="com-name" data-id="46">Hella海拉</a>
                        <a href="javascript:" class="com-name" data-id="47">法雷奥</a>
                        <a href="javascript:" class="com-name" data-id="48">雪莱特</a>
                        <a href="javascript:" class="com-name" data-id="49">灯小亮</a>
                        <a href="javascript:" class="com-name" data-id="50">捍道</a>
                    </div>
        </section>

        <section class="swiper-slide slide4">
            <img id="sanImg" src="">
        </section>
    </div>
</div>
    <script src="js/swiper.min.js"></script>
    <script src="js/swiper.animate.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/html2canvas.js"></script>
<!--     <script type="text/javascript" src="js/tracking-min.js"></script>
    <script type="text/javascript" src="js/face-min.js"></script> -->
    <script type="text/javascript" src="js/alloyimage-1.1.js"></script>
    <script src="js/cropper.min.js"></script>
    <script src="js/main.js"></script>


</body>
</html>